<template>
  <div id="search-com">
<!--    <h3>数据筛选 &nbsp</h3>-->
    <h3><span v-if="type !== 'user'">数据筛选</span>&nbsp</h3>
    <el-form :inline="true" class="search-form" :model="searchForm" ref="searchForm" size="small">
      <el-form-item label="入线渠道" prop="channel" v-if="isShowCom.channel">
        <el-select
            v-model="searchForm.channel"
            placeholder="请选择入线渠道"
            @change="onChangeChannel"
            filterable
            clearable
        >
          <el-option
              v-for="item in channelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司部门" prop="orgCode" v-if="isShowCom.orgCode">
        <el-cascader
            v-model="searchForm.orgCode"
            :options="orgCodeList"
            :props="{ label: 'orgName', value: 'orgCode', children: 'children', multiple: true, checkStrictly: true }"
            placeholder="请选择公司部门"
            @change="onChangeOrgCode"
            :show-all-levels=false
            collapse-tags
            clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="员工" prop="staffCode" v-if="isShowCom.staff" >
        <el-select
            v-model="searchForm.staffCode"
            :disabled="staffList.length === 0"
            placeholder="请选择员工"
            @change="onChangeStaff"
            filterable
            clearable
        >
          <el-option
              v-for="item in staffList"
              :key="item.id"
              :label="item.reallyName"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
        <el-form-item class="search-but" v-if="isShowCom.searchBut">
          <el-button type="primary" plain @click="fetchData(false)">查询</el-button>
          <el-button
              type="primary"
              plain
              @click="fetchData(true)"
          >重置
          </el-button>
        </el-form-item>
    </el-form>
    <div class="search-date" v-if="isShowCom.date">
      <template v-for="(item, index) in searchDateList">
        <el-button v-if="item.isUse" size="small" :type="currentChooseDate == item.value? 'primary':'info'" plain  @click="onChangeDate(item.value)" :key="index">{{ item.name }}
        </el-button>
      </template>

      <transition name="diy-time">
        <div v-if="currentChooseDate === 10000" class="diy-time">
          选择时间
          <el-date-picker
              v-model="searchForm.diyTime"
              type="daterange"
              align="right"
              size="small"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onChangeTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              >
          </el-date-picker>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import dataBoardCommon from '../mixins/dataBoardCommon'

export default {
  name: 'SearchCom',
  mixins: [dataBoardCommon],
  props: {
    type: { // logistics 物流 | company 公司 + 日期
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      searchForm: {
        channel: '', // 	入栈方式、渠道
        orgCode: [], // 	公司部门
        staffCode: '', // 	员工编号
        diyTime: []
      },
      currentChooseDate: 1, // 当前选择日期
      searchDateList: [
        { name: '今日', value: 1, isUse: true },
        { name: '昨天', value: 1001, isUse: true },
        { name: '过去7天', value: 1070, isUse: false },
        { name: '本周', value: 1071, isUse: true },
        { name: '本月', value: 1031, isUse: true },
        { name: '自定义时段', value: 10000, isUse: true }
      ],
      isShowCom: { // 组件显示
        channel: false, // 入栈方式、渠道
        orgCode: false, // 公司部门
        staff: false, // 员工
        searchBut: false, // 按钮
        date: false // 日期
      }
    }
  },
  watch: {
    $route (value) {
      console.log(value)
    },
    searchForm: {
      handler (val) {
        // console.log(val)
      },
      immediate: true
    },
    type (value) {
      this.showCom() // 组件显示
    }
  },
  mounted () {
    this.$nextTick(_ => {})
  },
  created () {
    this.showCom() // 组件显示
  },
  methods: {
    fetchData (isDefault) {
      if (isDefault) {
        this.$refs['searchForm'].resetFields()
        this.staffList = [] // 重置清除现有员工数据
        // console.log(isDefault, this.searchForm)
      }
      this.$emit('searchBasic', isDefault)
    },
    showCom () { // 组件显示
      const type = this.type
      switch (type) {
        case 'order': // 订单
          this.isShowCom.orgCode = true // 公司部门
          this.isShowCom.searchBut = true // 按钮
          this.isShowCom.date = true // 日期
          break
        case 'customer': // 客户
          this.isShowCom.channel = true // 渠道
          this.isShowCom.orgCode = true // 公司部门
          this.isShowCom.searchBut = true // 按钮
          this.isShowCom.date = true // 日期
          break
        case 'goods': // 商品
          this.isShowCom.orgCode = true // 公司部门
          this.isShowCom.searchBut = true // 按钮
          this.isShowCom.date = true // 日期
          break
        case 'logistics': // 物流
          this.isShowCom.orgCode = true // 公司部门
          this.isShowCom.searchBut = true // 按钮
          this.isShowCom.date = true // 日期
          break
        case 'user': // 用户运营看板
          this.isShowCom.date = true // 日期
          break
        default: // 默认为首页
          this.isShowCom.orgCode = true // 公司部门
          this.isShowCom.staff = true // 员工
          this.isShowCom.searchBut = true // 按钮
          this.isShowCom.date = true // 日期
          console.log('组件显示,没有类型,默认为首页配置！')
      }
      // console.log('type', type, this.isShowCom)
      /*
        this.isShowCom.channe = true // 入栈方式、渠道
        this.isShowCom.orgCode = true // 公司部门
        this.isShowCom.staff = true // 员工
        this.isShowCom.searchBut = true // 按钮
        this.isShowCom.date = true // 日期
      */
    },
    onChangeChannel (value) { // 切换 入栈方式、渠道
      this.searchForm.channel = value
      this.output() // 输出 抛出 内容值
    },
    onChangeOrgCode (value) { // 切换公司
      // this.searchForm.orgCode = value[value.length - 1] ?? ''
      // this.searchForm.orgCode = value[value.length - 1] ? value[value.length - 1]:''
      // this.searchForm.orgCode = value
      const orgCodeArr = []
      this.searchForm.orgCode.forEach(item => {
        orgCodeArr.push(item[item.length - 1])
      })
      // console.log(orgCodeArr)
      // 部门查询员工
      if (this.isShowCom.staff) {
        this.getSelectAllWithLeft(orgCodeArr)
      }
      this.output() // 输出 抛出 内容值
    },
    onChangeStaff (value) { // 切换员工
      this.searchForm.staffCode = value
      this.output() // 输出 抛出 内容值
    },
    onChangeDate (value) {
      this.currentChooseDate = value
      // console.log(this.currentChooseDate)
      if (this.currentChooseDate === 4 && this.searchForm.diyTime.length <= 0) {
        return this.$message.info('请选择日期！')
      }
      this.output() // 输出 抛出 内容值
    },
    onChangeTime (value) {
      this.output() // 输出 抛出 内容值
    },
    output () { // 输出 抛出 内容值
      // 处理选择日期
      const outTime = []
      const newTime = new Date()
      // console.log(new Date().toLocaleString())
      const hh = newTime.getHours()
      const mm = newTime.getMinutes()
      const ss = newTime.getSeconds()
      outTime[0] = `${this.searchForm.diyTime[0]} 00:00:00`
      // outTime[1] = `${this.searchForm.diyTime[1]} ${hh}:${mm}:${ss}`
      outTime[1] = `${this.searchForm.diyTime[1]} 23:59:59`
      // console.log(outTime)

      const obj = {
        searchFormData: Object.assign({}, this.searchForm),
        outputDate: this.currentChooseDate, // 当前选择日期
        changeDate: outTime, // 当前选择日期
        type: this.type
      }
      this.$emit('outputSearchData', obj)
    }
  }
}
</script>

<style scoped lang="scss">
#search-com{
  width: 100%;
}
#search-com h3:after {
  clear: both;
  display: table;
  content: '';
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  float: left;
  width: calc(100% - 500px);

  .el-form-item {
    width: 100%;
    max-width: 250px;
    min-width: 200px;
    /deep/.el-form-item__label{
      width: 70px;
      display: inline-block;
      //background-color: #ff0000;
    }
    /deep/.el-form-item__content {
      //background-color: #2D7EDF;
      width: calc(100% - 70px);
      .el-select, .el-date-editor, .el-cascader {
        width: 100%;
      }
    }
    .el-button{
      border: none;
      color: #4168E7;
      width: 68px;
      height: 32px;
      background-color: #E3EDFF;
      border-radius: 4px;
    }
    //&:last-child{
    //  width: 160px;
    //  min-width: 160px;
    //  /deep/.el-form-item__content{
    //    width: 100%!important;
    //  }
    //}
  }
  .search-but{
    //background-color: #3c763d;
    width: 160px;
    min-width: 160px;
    /deep/.el-form-item__content{
      width: 100%;
    }
  }
}

.search-date {
  width: 500px;
  text-align: right;
  float: right;
  margin-top: -40px;
  .el-button {
    border: none;
    margin-bottom: 10px;
  }
  .el-button--primary{
    color: #ffffff;
    background: #4168E7;
  }
  .diy-time {
    .el-date-editor{
      width: 230px;
    }
  }
}

</style>
